<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<link rel="stylesheet" href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
#accountInfo .box-header {
	padding: 19px;
}

#statistics .box-title {
	font-size: 16px;
}

#vol p:nth-child(2) {
	font-size: 15px;
}

select {
	color: black;
}

.ui-autocomplete-input {
	width: 100%;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class='full-center-content-scroll-noheader'>
			<div class="tab-content no-padding">
				<div class="box box-warning ">
					<div class="box-header with-border">
						<h3 class="box-title">保护设备台账统计</h3>
					</div>

					<!-- 统计信息 -->
					<div class="chart tab-pane active" id="statistics" style="position: relative">
						<div class="box box-warning box-solid with-border">
							<div class="box-header">
								<h3 class="box-title">按电压等级统计</h3>
								<div class="box-tools pull-right">
									<button class="btn btn-default btn-sm" data-widget="collapse">
										<i class="fa fa-minus"></i>
									</button>
								</div>
							</div>
							<div class="box-body" id="vol">
								<div class=" col-md-2">
									<div class="description-block border-right">
										<p class="description-header">500kV</p>
										<p class="text-green"></p>
									</div>
								</div>
								<div class="col-md-2">
									<div class="description-block border-right">
										<p class="description-header">220kV</p>
										<p class="text-yellow"></p>
									</div>
								</div>
								<div class=" col-md-2">
									<div class="description-block border-right">
										<p class="description-header">110kV</p>
										<p class="text-blue"></p>
									</div>
								</div>
								<div class=" col-md-2">
									<div class="description-block border-right">
										<p class="description-header">35kV</p>
										<p class="text-orange"></p>
									</div>
								</div>
								<div class=" col-md-2">
									<div class="description-block border-right">
										<p class="description-header">其他</p>
										<p class="text-black"></p>
									</div>
								</div>
								<div class=" col-md-2">
									<div class="description-block border-right">
										<p class="description-header">总计</p>
										<p class="text-red"></p>
									</div>
								</div>
							</div>
						</div>
						<div class="box box-warning box-solid with-border">
							<div class="nav-tabs-custom">
								<ul class="nav nav-tabs pull-right ui-sortable-handle" style="background-color: #f39c12">
									<li class="active"><a href="#tbPane" data-toggle="tab" aria-expanded="false">表格</a></li>
									<li id="chartTab"><a href="#chartPane" data-toggle="tab" aria-expanded="false">图形</a></li>
									<li class="pull-left header" style="color: white; font-size: 16px;">按生产厂家统计</li>
								</ul>
								<div class="tab-content">
									<div class="chart tab-pane" id="chartPane">
										<div id="manufactureChart" style="width: 100%; height: 500px;"></div>
									</div>
									<div class="chart tab-pane active" id="tbPane">
										<table id="manufactureTb" style="width: 100%;" class="table table-bordered table-hover">

										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/datatables/jquery.dataTables.js"></script>
		<script src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/plugins/layer/layer.js"></script>
		<script src="/resources/js/mymodal.js"></script>
		<script src="/resources/plugins/snapsvg/snap.svg.js"></script>
		<script src='protectAccount.js'></script>
		<script>
			$(function() {
				getStatistics();
			})
			var menushow = false;
		</script>
	</ui:define>
</ui:composition>
